<template>
  <div>
    <!-- 1.初始化页面 -->
    <!--2 绑定到表单数据数据中 -->
    <el-dialog
      @closed="closed"
      :title="status.isAdd?'秒杀活动添加':'秒杀活动编辑'"
      :visible.sync="status.isshow"
    >
      <el-form :model="form">
        {{form}}
        <el-form-item label="活动名称" label-width="120px">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动期限" label-width="120px">
          <el-date-picker
            v-model="getTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="changTime"
          ></el-date-picker>
        </el-form-item>
        <!-- 4.1 绑定一级分类的方法 -->
        <el-form-item label="一级分类" label-width="120px">
          <el-select
            v-model="form.first_cateid"
            placeholder="请选择一级分类"
            @change="change_first_cate_id"
          >
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 5.1 绑定二级分类的方法 -->
        <el-form-item label="二级分类" label-width="120px">
          <el-select
            v-model="form.second_cateid"
            placeholder="请选择二级分类"
            @change="change_second_cate_id"
          >
            <!-- 4.4 遍历二级分类 -->
            <el-option
              v-for="item in second_cate"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" label-width="120px">
          <el-select v-model="form.goodsid" placeholder="请选择">
            <!-- 5.4 遍历商品 -->
            <el-option
              v-for="item in goods"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" v-if="status.isAdd" @click="add">添 加</el-button>
        <el-button type="primary" v-else @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 1.初始化页面
// 2.初始化form数据，绑定到页面
// 3.初始化二级分类的数据
// ---3.2获取到商品分类的list
//---3.3 调用商品列表的数据
// ---3.4一进页面判断是否发请求
// 4.点击了一级分类，获取响应的二级分类的列表
// ---4.1 绑定一级分类的方法
// ---4.2 通过一及分类的first_cateid: "", 找到对应的二级分类pid
// ---4.3 给second_cate赋值
// ---4.4 遍历二级分类
// ---4.5 修改了一级分类要清空二级分类的列表
// ---4.6 封装一级分类的方法
// ---4.7 调用一级分类方法
// 5.点击了二级分类，获取对应的商品的商品
// ---5.1 绑定二级分类的方法
// ---5.2 根据goods列表中的form的second获取商品列表
// ---5.3 goods赋值
// ---5.4 遍历商品
// ---5.5 修改了二级分类要清空商品列表
// ---5.6 封装二级分类的方法
// ---5.7 调用二级分类方法
// 6.获取时间
// ---6.1 初始化时间
// ---6.2 绑定到页面中
// ---6.3 点击事件,将开始时间和结束时间都转换为时间搓
// 7.点击添加
// ---7.1 添加请求将form赋值上去
//---7.2 清空操作
// ---7.3 父元素点击了编辑按钮，触发子组件的的getOne方法
// ---7.4
import {
  reqseckadd,
  reqseckinfo,
  reqseckedit,
  reqcatelist
} from "../../../http/api";
import { successAlert,errorAlert} from "../../../utils/alert";

import { mapActions, mapGetters } from "vuex";
export default {
  props: ["status"],
  computed: {
    ...mapGetters({
      // 3.2获取到商品分类的list
      catelist: "cate/list",
      //3.2 获取商列表
      goodsList: "goods/list"
    })
  },
  mounted() {
    //3.4一进页面判断是否发请求 一进页面就调用--->如果之前法国，就不发，若果之前没发过请求就发请求
    if (this.catelist.length == 0) {
      this.reqcateList();
    }

    // 获取全部列表
    this.reqGoodsList(true);
    this.reqList();
  },

  data() {
    return {
      // 日期数据
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      //2.初始化添加的数据
      form: {
        title: "",
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //一级分类
        second_cateid: "", //二级分类
        goodsid: "", //商品编号
        status: 1
      },
      //时间初始值
      getTime: null,
      //3.初始化二级分类
      second_cate: [],
      // 4.0 商品初始值
      goods: [],
      //6.1 初始化时间
      getTime: null,
      formLabelWidth: "120px"
    };
  },
  methods: {
    ...mapActions({
      //3.3 调用商品列表的数据
      reqcateList: "cate/reqList",
      // 3.2 获取商品的列表的方法
      reqGoodsList: "goods/reqList",
      // 引入仓库中的秒杀列表
      reqList: "seckil/reqList"
    }),
    //点击了一级分类，获取响应的二级分类的列表
    async change_first_cate_id() {
      // 4.5 修改了一级分类要清空二级分类的列表
      this.form.second_cateid = "";
      //4.7 调用一级分类方法
      this.changeOne();
    },
    //4.6 封装一级分类的方法
    async changeOne() {
      // 4.2 通过一及分类的first_cateid: "", 找到对应的二级分类pid
      let res = await reqcatelist({ pid: this.form.first_cateid });
      if (res.data.code == 200) {
        //给second_cate赋值
        this.second_cate = res.data.list ? res.data.list : [];
      }
    },

    //5.点击了二级分类，获取对应的商品的商品
    change_second_cate_id() {
      // 5.5 修改了二级分类要清空商品列表
      this.form.goodsid = "";
      //5.7 调用二级分类
      this.changeTwo();
    },
    // 5.6 封装二级分类的方法
    changeTwo() {
      // /5.2 根据goods列表中的form的second获取商品列表
      let obj = this.goodsList.filter(item => {
        return item.second_cateid == this.form.second_cateid;
      });
      // 赋值
      // console.log(obj);
      // 5.3 goods赋值
      this.goods = obj ? obj : [];
    },

    //9 点击了取消
    cancel() {
      this.status.isshow = false;
    },
    //8. 操作时间
    changTime(time) {
      console.log(time);
      // 开始时间--time[0]是开始时间--->转换成时间搓
      this.form.begintime = new Date(time[0]).getTime();
      // 结束时间--time[0]是结束时间--->转换成时间搓
      this.form.endtime = new Date(time[1]).getTime();
    },
    //7.2 清空操作
    empty() {
      this.form = {
        title: "",
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //一级分类
        second_cateid: "", //二级分类
        goodsid: "", //商品编号
        status: 1
      };
      // 清空二级分类
      this.second_cate = [];
      // 清空商品
      this.goods = [];
      // 清空时间
      this.getTime = null;
    },
    add() {
      // 验空
      if (this.form.title == "") {
        errorAlert("活动名称不能为空");
        return;
      }
      if (this.form.begintime == "") {
        errorAlert("请选择开始时间");
        return;
      }

      if (this.form.endtime == "") {
        errorAlert("请选择结束时间");
        return;
      }
      if (this.form.first_cateid == "") {
        errorAlert("一级分类不能为空");
        return;
      }
      if (this.form.second_cateid == "") {
        errorAlert("二级分类不能为空");
        return;
      }
      if (this.form.goodsid == "") {
        errorAlert("商品不能为空");
        return;
      }
      // 7.1 添加请求将form赋值上去
      reqseckadd(this.form).then(res => {
        if (res.data.code == 200) {
          // 1.弹成功
          successAlert(res.data.msg);
          // 2.点击确定之后，form数据要清空
          this.empty();
          // 3.弹框消失--->因为传过来的status是一个引用类型，所以可以在子组件直接操作，但是不可以修改status
          this.status.isshow = false;
          // 列表需要重新渲染
          this.reqList();
        }
      });
    },

    //7.3 父元素点击了编辑按钮，触发子组件的的getOne方法
    getOne(id) {
      //发请求---->获取一条数据
      reqseckinfo({
        id: id
      }).then(res => {
        // 赋值
        this.form = res.data.list;
        // 但是此时的from里面没有id
        this.form.id = id;
        // 设置时间
        this.getTime = [
          new Date(Number(this.form.begintime)),
          new Date(Number(this.form.endtime))
        ];
        //根据一级分类获取二级分类，调用一级分类
        this.changeOne();
        // 根据二级分类，调用商品的内容
        this.changeTwo();
      });
    },
    // 点击了修改
    update() {
      if (this.form.title == "") {
        errorAlert("活动名称不能为空");
        return;
      }
      if (this.form.begintime == "") {
        errorAlert("请选择开始时间");
        return;
      }

      if (this.form.endtime == "") {
        errorAlert("请选择结束时间");
        return;
      }
      // 发请求
      reqseckedit(this.form).then(res => {
        if (res.data.code == 200) {
          // 1.弹成功
          successAlert(res.data.msg);
          // 2.清空form
          this.empty();
          //3. 弹框消失
          this.status.isshow = false;
          //4.列表重新渲染
          this.reqList();
        }
      });
    },
    // 9.修改Bug
    // 我们希望点击了添加之后，取消，在点击添加，数据还在，但点击了编辑之后，取消后点击添加，清空内容
    // 给弹框添加close关闭事件---如果是添加的取消，什么都不做；如果是编辑的取消，form清空
    closed() {
      if (!this.status.isAdd) {
        this.empty();
      }
    }
  }
};
</script>

<style scoped lang="less">
// @import "../../less/index.less";
.upload_box {
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  position: relative;
}
.upload_plus {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
}
.upload_input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

// elementui样式

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #b39a9a !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>